<template>
	<scroll-view class="pay-container" scroll-y="true" :style="{ height: '100vh', width: '100%' }">
		<!-- 状态显示 -->
		<view class="status-section">
			<image :src="getStatusIcon()" class="status-icon" mode="aspectFit"></image>
			<text class="status-title">{{ getStatusTitle() }}</text>
			<text class="status-desc">{{ getStatusDesc() }}</text>
		</view>

		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-info">
				<image :src="userInfo.avatar" class="user-avatar" mode="aspectFill">
				</image>
				<view class="user-details">
					<text class="user-name">{{ userInfo.name || userInfo.nickname }}</text>
					<text class="user-basic">{{ userInfo.gender === 0 ? '男' : userInfo.gender === 1 ? '女' : '男' }} {{
						userInfo.age }}岁</text>
				</view>
			</view>
			<view class="user-info-list">
				<view class="info-item">
					<text class="info-label">身份证号</text>
					<text class="info-value">{{ userInfo.IDnumber }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">联系电话</text>
					<text class="info-value">{{ userInfo.phone }}</text>
				</view>
				<view class="info-item">
					<text class="info-label">家庭住址</text>
					<text class="info-value">{{ userInfo.address }}</text>
				</view>
			</view>
		</view>

		<!-- 签约详情 -->
		<view class="contract-details">
			<view class="detail-item">
				<text class="detail-label">签约机构</text>
				<text class="detail-value">{{ contractInfo.organizationId?.name }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">签约团队</text>
				<text class="detail-value">{{ contractInfo.teamId?.name }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">签约医生</text>
				<text class="detail-value">{{ contractInfo.doctorId?.name }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">服务包</text>
				<text class="detail-value">{{ contractInfo.servicePackId?.name }}</text>
			</view>
			<view class="detail-item">
				<text class="detail-label">签约周期</text>
				<text class="detail-value">{{ contractInfo.servicePackId?.period }}</text>
			</view>
			<view class="detail-item price-item">
				<text class="detail-label">费用</text>
				<text class="detail-price">¥{{ contractInfo.servicePackId?.price }}</text>
			</view>
			<view v-if="isContractSuccess()" class="detail-item">
				<text class="detail-label">支付方式</text>
				<text class="detail-value">{{ getPaymentMethod() }}</text>
			</view>
			<view v-if="isContractSuccess()" class="detail-item">
				<text class="detail-label">生效日期</text>
				<text class="detail-value">{{ contractInfo.effectiveDate || '未知时间' }}</text>
			</view>
			<view v-if="isContractSuccess()" class="detail-item">
				<text class="detail-label">失效时间</text>
				<text class="detail-value">{{ calculateExpiryDate(contractInfo.effectiveDate) }}</text>
			</view>
			<view v-if="isContractSuccess()" class="detail-item">
				<text class="detail-label">申请时间</text>
				<text class="detail-value">{{ contractInfo.applyTime }}</text>
			</view>
			<view v-if="isContractSuccess()" class="detail-item">
				<text class="detail-label">审核时间</text>
				<text class="detail-value">{{ contractInfo.updateTime }}</text>
			</view>
			<view v-if="isContractSuccess()" class="detail-item">
				<text class="detail-label">签约备注</text>
				<text class="detail-value">{{ contractInfo.remark }}</text>
			</view>
		</view>
		<view class="box">

		</view>
		<!-- 底部按钮 -->
		<view class="pay-button-container">
			<button v-if="isContractSuccess()" class="renew-button" @click="handleRenew">申请续约</button>
			<button v-else class="pay-button" @click="handlePay">立即支付 ¥{{ contractInfo.servicePackId?.price || '0'
			}}</button>
		</view>
	</scroll-view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useContractStore } from '@/store/contract.js'

// 签约状态管理
const contractStore = useContractStore()

// 响应式数据
const userInfo = ref({})
const contractInfo = ref({})
const contractId = ref('') // 签约记录ID
const contractDetail = ref({}) // 完整签约详情
const paymentMethod = ref('') // 支付方式

// 页面加载时接收参数
onLoad((options) => {
	if (options.contractId) {
		contractId.value = options.contractId
		// 接收支付方式参数
		if (options.paymentMethod) {
			paymentMethod.value = options.paymentMethod
		}
		// 获取完整签约详情
		getContractDetail()
	} else {
		uni.showToast({
			title: '签约信息缺失，请重新进入',
			icon: 'none'
		})
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}
})

// 获取签约详情
const getContractDetail = async () => {
	if (!contractId.value) return

	try {
		uni.showLoading({
			title: '加载中...'
		})

		// 使用状态管理获取签约详情
		await contractStore.getContractDetailAction(contractId.value)

		// 从状态管理中获取数据
		userInfo.value = contractStore.userInfo
		contractInfo.value = contractStore.contractInfo
		contractDetail.value = contractStore.contractDetail

	} catch (error) {
		uni.showToast({
			title: error.message || '获取签约详情失败',
			icon: 'none'
		})
	} finally {
		uni.hideLoading()
	}
}

// 页面挂载时的处理（现在用户信息通过API获取，无需额外处理）
onMounted(() => {
	// 用户信息现在通过 getContractDetail API 获取，无需额外处理
})

// 状态判断方法
const isContractSuccess = () => {
	return contractInfo.value.state === 3 // 签约成功状态
}

// 计算失效日期
const calculateExpiryDate = (effectiveDate) => {
	if (!effectiveDate) return '未知时间'
	const date = new Date(effectiveDate)
	date.setFullYear(date.getFullYear() + 1) // 加一年
	return date.toISOString().split('T')[0] // 返回 YYYY-MM-DD 格式
}

// 获取状态图标
const getStatusIcon = () => {
	const state = contractInfo.value.state
	switch (state) {
		case 0: // 已驳回
			return 'https://cdn8.axureshop.com/demo/1689476/images/%E7%AD%BE%E7%BA%A6%E8%BF%9B%E5%BA%A6-%E5%BE%85%E5%AE%A1%E6%A0%B8/u4963.png'
		case 1: // 待审核
			return 'https://cdn8.axureshop.com/demo/1689476/images/%E7%AD%BE%E7%BA%A6%E8%BF%9B%E5%BA%A6-%E5%BE%85%E5%AE%A1%E6%A0%B8/u4963.png'
		case 2: // 待支付
			return 'https://cdn8.axureshop.com/demo/1689476/images/%E7%AD%BE%E7%BA%A6%E8%BF%9B%E5%BA%A6-%E5%BE%85%E5%AE%A1%E6%A0%B8/u4963.png'
		case 3: // 已签约
			return 'https://cdn8.axureshop.com/demo/1689476/images/%E7%BB%93%E6%9E%9C/u4418.png'
		case 4: // 待续约
			return 'https://cdn8.axureshop.com/demo/1689476/images/%E7%AD%BE%E7%BA%A6%E8%BF%9B%E5%BA%A6-%E5%BE%85%E5%AE%A1%E6%A0%B8/u4963.png'
		default:
			return 'https://cdn8.axureshop.com/demo/1689476/images/%E7%AD%BE%E7%BA%A6%E8%BF%9B%E5%BA%A6-%E5%BE%85%E5%AE%A1%E6%A0%B8/u4963.png'
	}
}

// 获取状态标题
const getStatusTitle = () => {
	// 直接使用状态机的状态文本
	return contractStore.contractStateText
}

// 获取状态描述
const getStatusDesc = () => {
	const state = contractInfo.value.state
	switch (state) {
		case 0: // 已驳回
			return '很抱歉，您的签约申请被驳回'
		case 1: // 待审核
			return '您的签约申请正在审核中，请耐心等待'
		case 2: // 待支付
			return '您的签约申请已通过，请尽快完成支付'
		case 3: // 已签约
			return '恭喜您，签约已成功完成'
		case 4: // 待续约
			return '您的签约已到期，请及时续约'
		default:
			return '签约状态未知'
	}
}

// 获取支付方式
const getPaymentMethod = () => {
	if (paymentMethod.value === 'alipay') {
		return '支付宝'
	} else if (paymentMethod.value === 'wechat') {
		return '微信支付'
	} else {
		return '支付宝' // 默认显示支付宝
	}
}



// 处理支付
const handlePay = () => {
	const price = contractInfo.value.servicePackId?.price
	if (contractId.value && price) {
		uni.navigateTo({
			url: `/homepackge/pages/payPage/pagePage?contractId=${contractId.value}&price=${price}`
		})
	} else {
		uni.showToast({
			title: '签约信息缺失',
			icon: 'none'
		})
	}
}

// 申请续约
const handleRenew = () => {
	// 跳转到申请签约页面
	uni.navigateTo({
		url: '/homepackge/pages/apply-contract/apply-contract'
	})
}
</script>

<style scoped>
.pay-container {
	width: 100%;
	background-color: #f5f5f5;
	padding: 40rpx 30rpx;
	padding-bottom: 160rpx;
	box-sizing: border-box;
	overflow-x: hidden;
	/* 防止横向滚动 */
}

/* 状态部分 */
.status-section {
	text-align: center;
	margin-bottom: 40rpx;
}


.status-icon {
	width: 80rpx;
	height: 80rpx;
}

.status-title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 16rpx;
}

.status-desc {
	display: block;
	font-size: 28rpx;
	color: #666;
	line-height: 1.5;
}

/* 用户信息卡片 */
.user-card {
	width: 100%;
	background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	color: #fff;
	box-sizing: border-box;
}

.user-info {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
}

.user-avatar {
	width: 120rpx;
	height: 120rpx;
	border-radius: 20rpx;
	margin-right: 30rpx;
}

.user-details {
	flex: 1;
}

.user-name {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	margin-bottom: 8rpx;
}

.user-basic {
	display: block;
	font-size: 28rpx;
	opacity: 0.9;
}

.box {
	width: 200rpx;
	height: 80rpx;
}

.user-info-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.info-label {
	font-size: 28rpx;
	opacity: 0.9;
}

.info-value {
	font-size: 28rpx;
	font-weight: 500;
}

/* 签约详情 */
.contract-details {
	width: 100%;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 40rpx;
	box-sizing: border-box;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.detail-item:last-child {
	border-bottom: none;
}

.detail-label {
	font-size: 32rpx;
	color: #666;
}

.detail-value {
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.price-item .detail-price {
	font-size: 36rpx;
	color: #FF4444;
	font-weight: 600;
}

/* 支付按钮 */
.pay-button-container {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	padding: 30rpx;
	padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	background-color: #fff;
	border-top: 1rpx solid #f0f0f0;
	z-index: 100;
	box-sizing: border-box;
}

.pay-button {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
	color: #fff;
	border: none;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
}

.pay-button:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.3);
}

.renew-button {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
	color: #fff;
	border: none;
	border-radius: 12rpx;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 4rpx 12rpx rgba(74, 144, 226, 0.3);
}

.renew-button:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.3);
}
</style>
